"use strict";

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // css 单独打包插件,webpack4.x版本适用
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//合并重复的css
const setMPA = require("./getEntry");
const { HTMLWebpackPlugins } = setMPA();

// 开发和构建时需要的插件和loader
module.exports = {
  optimization: {
    //提取页面公共资源
    splitChunks: {
      cacheGroups: {
        // 注意: priority属性
        // 其次: 打包业务中公共代码
        common: {
          name: "common",
          chunks: "all",
          minSize: 1,
          priority: 0
        },
        // 首先: 打包node_modules中的文件
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all",
          priority: 10
        }
      }
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      __CLIENT__: true //设置全局环境变量
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
  ].concat(HTMLWebpackPlugins),
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === "development"
            }
          },
          "css-loader",
          "sass-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")]
            }
          }
        ]
      }
    ]
  }

};
